
// 1 页面数据渲染
// 1 定义一个函数
// 2 发送请求获取数据  渲染页面
// 1 token 几乎都是携带在请求头中   写法几乎定死!！！
// 2 点击修改数据
// 获取数据渲染页面
const tbody = document.querySelector('tbody')
async function getScore() {
    const result = await axios({
        url: "/score/list",
        //  　请求头(对象)中　携带　　token
        // headers: {
        //     // 一般就写这个名字，如果你的接口文档找不到说明，问后端确认
        //     Authorization: localStorage.getItem("token8788"),
        // },
    });
    console.log(result);
    // 生成html
    let html = ''
    for (const key in result.data.data) {
        const { name, score } = result.data.data[key]
        html += `
        <tr>
        <th scope="row">${key}</th>
        <td>${name}</td>
        <td data-stu_id=${key} data-batch=${1} class="score">${score[0]}</td>
        <td data-stu_id=${key} data-batch=${2} class="score">${score[1]}</td>
        <td data-stu_id=${key} data-batch=${3} class="score">${score[2]}</td>
        <td data-stu_id=${key} data-batch=${4} class="score">${score[3]}</td>
        <td data-stu_id=${key} data-batch=${5} class="score">${score[4]}</td>
      </tr
      `
    }
    // 插到tbody中 
    tbody.innerHTML = html
}
getScore();

//绑定双击事件
tbody.addEventListener('dblclick', function (ev) {
    //判断是不是想要的元素
    const target = ev.target
    if (target.classList.contains('score')) {
        //显示出一个 输入框
        const input = document.createElement('input')
        input.type = 'text'
        input.value = target.innerText
        //插入对应位置上
        target.appendChild(input)
        // 设置input标签获得焦点
        input.focus()
        // 绑定失去焦点事件
        input.addEventListener('blur', updateScore)
        // 绑定按下回车事件
        input.addEventListener('keyup', function (inputEv) {

            //    判断按下的是回车键
            if (inputEv.key === 'Enter') {
                // 事件解绑
                input.removeEventListener('blur', updateScore)

                updateScore()
            }
        })

        async function updateScore() {
            // 获取参数发送请求，完成修改
            // 获取参数  ID 第几次成绩 分数
            const { stu_id, batch } = target.dataset
            const score = input.value

            const result = await axios({
                url: '/score/entry',
                method: 'post',
                data: {
                    stu_id,
                    batch,
                    score
                }
            })
            console.log(result);
            if (result.data.code === 0) {
                toastr.success(result.data.message, '成功')
                // 刷新数据
                getScore();
            }
        }
    }
})






